<template>
  <div>
    <el-main style="padding:0">
      <el-row :gutter="15">
        <el-col :lg="12">
          <el-card shadow="never" header="导入(使用mock,有50%几率导入失败)">
            <FileImport :apiObj="common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success" />
            <FileImport 
              :apiObj="common.importFile" 
              :data="{otherData:'demo'}" 
              templateUrl="http://www.scuiadmin/file.xlsx" 
              accept=".xls, .xlsx" 
              :maxSize="30" 
              tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" 
              @success="success"
            >
              <template #default="{open}">
                <el-button type="primary" icon="el-icon-upload" @click="open">导入(全配置)</el-button>
              </template>
              <template #uploader>
                <!-- <el-icon class="el-icon--upload"><sc-icon-file-excel /></el-icon> -->
                <div class="el-upload__text">
                  将文件拖到此处或 <em>点击选择文件上传</em>
                </div>
              </template>
              <template #form="{formData}">
                <el-form-item label="覆盖已有数据">
                  <el-switch v-model="formData.coverage" />
                </el-form-item>
                <el-form-item label="跳过错误数据">
                  <el-switch v-model="formData.skipError" />
                </el-form-item>
              </template>
            </FileImport>
            <el-descriptions :column="1" border size="small" style="margin-top: 15px;">
              <el-descriptions-item label="apiObj" :width="200">Object 文件上传接口对象</el-descriptions-item>
              <el-descriptions-item label="data">Object 上传时附带的额外参数</el-descriptions-item>
              <el-descriptions-item label="accept">String 可选择文件类型，默认为".xls, .xlsx"</el-descriptions-item>
              <el-descriptions-item label="maxSize">Number 可选择文件大小，单位为M，默认为10</el-descriptions-item>
              <el-descriptions-item label="tip">String 上传框底下的提示语句，默认为"请上传小于或等于 {maxSize}M 的 {accept} 格式文件"</el-descriptions-item>
              <el-descriptions-item label="templateUrl">String 模板的下载URL</el-descriptions-item>
              <el-descriptions-item label="@success">事件 上传接口返回的事件，返回function(res, close)，执行close()将关闭窗口</el-descriptions-item>
              <el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
              <el-descriptions-item label='#uploader'>插糟 自定义上传框插槽</el-descriptions-item>
              <el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为上传时附带的额外参数</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :lg="12">
          <el-card shadow="never" header="导出">
            <FileExport :apiObj="common.exportFile" />
            <FileExport 
              :apiObj="common.exportFile" 
              blob 
              fileName="人员列表" 
              :data="{otherData:'demo'}" 
              :column="column" 
              :fileTypes="['xlsx', 'docx', 'pdf']"
            >
              <template #default="{open}">
                <el-button type="primary" icon="el-icon-download" @click="open">导出(blob文件流)</el-button>
              </template>
              <template #form="{formData}">
                <el-form-item label="导出条数">
                  <el-select v-model="formData.limit" placeholder="Select">
                    <el-option label="100条" value="100" />
                    <el-option label="500条" value="500" />
                    <el-option label="1000条" value="1000" />
                    <el-option label="5000条" value="5000" />
                    <el-option label="10000条" value="10000" />
                  </el-select>
                </el-form-item>
              </template>
            </FileExport>
            <el-descriptions :column="1" border size="small" style="margin-top: 15px;">
              <el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item>
              <el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item>
              <el-descriptions-item label="fileName">String 下载文件名称，默认为当前时间戳</el-descriptions-item>
              <el-descriptions-item label="fileTypes">Array 可选择文件类型，默认为['xlsx']，组件将数组第一项当做已选项</el-descriptions-item>
              <el-descriptions-item label="column">Array 列配置，请求文件时将添加column为key的参数，值为prop逗号","分割的字符串</el-descriptions-item>
              <el-descriptions-item label="blob">Boolean 是否由游览器请求文件返回blob后提供下载</el-descriptions-item>
              <el-descriptions-item label="progress">Boolean blob开启后是否显示下载文件进度条，当服务器启用Gzip时，建议关闭，因为获取到的文件总数和下载总数不匹配。</el-descriptions-item>

              <el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
              <el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为请求时附带的额外参数</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-dialog 
      v-model="importErrDialogVisible" 
      title="导入失败" :width="680" 
      destroy-on-close @closed="() => {importErrData = {}}"
    >
      <el-alert 
        :title="`总条目数 ${importErrData.ok} ,其中有 ${importErrData.fail} 条格式不满足导入要求，请修改后再次操作。`" 
        type="error" 
        show-icon 
        :closable="false"
      />
      <div style="margin-top: 15px;">
        <el-table :data="importErrData.failList" border stripe max-height="270" style="width: 100%">
          <el-table-column prop="keyName" label="主键名" width="180" />
          <el-table-column prop="" label="状态" width="100" >
            <el-tag type="danger"><el-icon><el-icon-circle-close-filled/></el-icon> 失败</el-tag>
          </el-table-column>
          <el-table-column prop="reason" label="原因" />
        </el-table>
      </div>
      <template #footer>
        <el-button type="primary" @click="importErrDialogVisible=false">我知道了</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue'
import {ElAlert} from 'element-plus'
import common from '@/service/file'

const FileImport = defineAsyncComponent(() => import('@/components/File/Import'))
const FileExport = defineAsyncComponent(() => import('@/components/File/Export'))

const importErrData = ref({})
const importErrDialogVisible = ref(false)
const column = [
  {label: "姓名", prop: "name"},
  {label: "性别", prop: "sex"},
  {label: "评分", prop: "num"},
  {label: "邮箱", prop: "email",hide: true},
  {label: "进度", prop: "progress"},
  {label: "注册时间", prop: "datetime"}
]

function success(res, close){
  if (res.code === 200) {
    ElAlert("导入返回成功后，可后续操作，比如刷新表格等。执行回调函数close()可关闭上传窗口。", "导入成功", {
      type: "success",
      showClose: false,
      center: true
    })
    close()
  } else {
    //返回失败后的自定义操作，这里演示显示错误的条目
    importErrDialogVisible.value = true
    importErrData.value = res.data
  }
}
</script>
